<!-- 添加车辆 -->
<template>
  <view class="addcar">
    <view class="list">
      <view class="input">
        <text>行政区划</text>
        <view class="area-city" @click="areaModel = true">
          {{ form.province }}/{{ form.city }}/{{ form.region }}</view
        >
        <u-select
          v-model="areaModel"
          mode="mutil-column-auto"
          :list="areaList"
          v-if="areaList.length > 0"
          @confirm="areaconfirm"
        >
        </u-select>
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>名称</text>
        <input
          class="uni-input"
          type="text"
          @input="onNameChange"
          :value="form.name"
          placeholder="请输入检测站名称"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="40"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>位置</text>
        <input
          class="uni-input"
          type="text"
          @input="onLocAddrChange"
          :value="form.locAddr"
          placeholder="请输入检测站位置"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>联系电话</text>
        <input
          class="uni-input"
          type="text"
          @input="onMobileChange"
          :value="form.mobile"
          placeholder="请输入联系电话"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>是否启用</text>
        <picker
          mode="selector"
          @change="onIsEnableChange"
          :range-key="rangeKey"
          :value="form.isEnable"
          :range="isEnableList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(isEnableList, form.isEnable) || '请选择是否启用'
            }}</view>
        </picker>
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>是否代驾</text>
        <picker
          mode="selector"
          @change="onIsDjEnableChange"
          :range-key="rangeKey"
          :value="form.isDjEnable"
          :range="isEnableList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(isEnableList, form.isDjEnable) || '请选择是否代驾'
            }}</view>
        </picker>
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>是否自驾</text>
        <picker
          mode="selector"
          @change="onIsZjEnableChange"
          :range-key="rangeKey"
          :value="form.isZjEnable"
          :range="isEnableList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(isEnableList, form.isZjEnable) || '请选择是否自驾'
            }}</view>
        </picker>
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>

      <view class="input">
        <text>代驾费</text>
        <input
          class="uni-input"
          type="number"
          @input="onDriverFeeChange"
          :value="form.stationDriverFee"
          placeholder="请输入代驾费"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>普通会员</text>
        <input
          class="uni-input"
          type="number"
          @input="onMemPermfee1Change"
          :value="form.memPermfee1"
          placeholder="请输入普通会员提成"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>联盟商</text>
        <input
          class="uni-input"
          type="number"
          @input="onMemPermfee2Change"
          :value="form.memPermfee2"
          placeholder="请输入联盟商提成"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>VIP店长</text>
        <input
          class="uni-input"
          type="number"
          @input="onMemPermfee3Change"
          :value="form.memPermfee3"
          placeholder="请输入VIP店长提成"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>排序</text>
        <input
          class="uni-input"
          type="text"
          @input="onSortChange"
          :value="form.sort"
          placeholder="请输入排序"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>营业日期</text>
        <input
          class="uni-input"
          type="text"
          @input="onOfficeHoursChange"
          :value="form.officeHours"
          placeholder="请输入营业日期"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>上午</text>
        <input
          class="uni-input"
          type="text"
          @input="onAmChange"
          :value="form.am"
          placeholder="请输入上午营业时间"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>下午</text>
        <input
          class="uni-input"
          type="text"
          @input="onPmChange"
          :value="form.pm"
          placeholder="请输入下午营业时间"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input" @click="selectAddress">
        <text>地址</text>
        <view :class="addressStyle">{{ form.locPoi || '请输入地址' }}</view>
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>

    </view>
    <view class="primary" @click="sendAddCar">保存</view>
  </view>
</template>

<script>
export default {
  onLoad(optData) {
    if (optData && optData.station){
      this.form = JSON.parse(optData.station);
    }
  },
  computed: {
    addressStyle() {
      return this.form.locPoi ? 'address' : 'addressPlaceholder';
    },
  },
  data() {
    return {
      form:{
        name:'',
        locAddr:'',
        mobile:'',
        isEnable: '1',
        isDjEnable: '1',
        isZjEnable: '1',
        stationDriverFee: '39',
        memPermfee1: '',
        memPermfee2: '',
        memPermfee3: '',
        sort:'',
        officeHours:'周一至周日',
        am:'8:00 - 12:00',
        pm:'14:00 - 18:00',
        coordinate:'',
        locPoi:'',
        provinceCode:'',
        cityCode:'',
        regionCode:'',
        province:'',
        city:'',
        region:'',
        lng:'',
        lat:'',
      },
      isEnableList: [],
      rangeKey: 'dictLabel',
      areaModel: false,
      areaList: [],
    };
  },
  created() {
    this._fetchAreaList();
    this.fetchIsEnable();
  },
  methods: {
    areaconfirm(e) {
      this.form.provinceCode = e[0].value;
      this.form.province = e[0].label;
      this.form.cityCode = e[1].value;
      this.form.city = e[1].label;
      this.form.regionCode = e[2].value;
      this.form.region = e[2].label;
    },
    _fetchAreaList() {
      this.$clApi.haoleiAgentApi.fetchAreaList().then(res => {
        if (res.code === 200) {
          this.areaList = res.data;
        }
      });
    },
    fetchIsEnable() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'sys_is_enable',
        })
        .then(res => {
          if (res.code === 200) {
            this.isEnableList = res.data;
          }
        });
    },
    selectAddress() {
      const that = this;
      uni.chooseLocation({
        success: function(res) {
          // 位置名称：
          that.form['locPoi'] = res.address;
          // 详细地址：
          that.form['lng'] = res.longitude;
          that.form['lat'] = res.latitude;
          that.form['coordinate'] = `${res.longitude},${res.latitude}`;
          that.pickCoordinate = `${res.longitude},${res.latitude}`;
        },
        fail: function(res) {
          console.log('chooseAddrFail' + res);
        },
      });
    },

    onNameChange(e) {
      this.form.name = e.target.value && e.target.value;
    },
    onLocAddrChange(e) {
      this.form.locAddr = e.target.value && e.target.value;
    },
    onMobileChange(e) {
      this.form.mobile = e.target.value && e.target.value;
    },
    onDriverFeeChange(e) {
      this.form.stationDriverFee = e.target.value && e.target.value;
    },
    onMemPermfee1Change(e) {
      this.form.memPermfee1 = e.target.value && e.target.value;
    },
    onMemPermfee2Change(e) {
      this.form.memPermfee2 = e.target.value && e.target.value;
    },
    onMemPermfee3Change(e) {
      this.form.memPermfee3 = e.target.value && e.target.value;
    },
    onSortChange(e) {
      this.form.sort = e.target.value && e.target.value;
    },
    onOfficeHoursChange(e) {
      this.form.officeHours = e.target.value && e.target.value;
    },
    onAmChange(e) {
      this.form.am = e.target.value && e.target.value;
    },
    onPmChange(e) {
      this.form.pm = e.target.value && e.target.value;
    },
    onIsEnableChange(e) {
      this.form.isEnable = this.isEnableList[e.target.value].dictValue;
    },
    onIsDjEnableChange(e) {
      this.form.isDjEnable = this.isEnableList[e.target.value].dictValue;
    },
    onIsZjEnableChange(e) {
      this.form.isZjEnable = this.isEnableList[e.target.value].dictValue;
    },

    sendAddCarReq() {
      if (!this.form.regionCode) {
        this.$utils.toast('请输入行政区划');
        return;
      }
      if (!this.form.id){
        this.$clApi.haoleiAgentApi
          .fetchStationAdd({
            data: this.form,
          })
          .then(res => {
            if (res.code === 200) {
              uni.navigateBack();
            } else {
              this.$utils.toast('保存失败');
            }
          });
      }else{
        this.$clApi.haoleiAgentApi
          .fetchStationEdit({
            data: this.form,
          })
          .then(res => {
            if (res.code === 200) {
              uni.navigateBack();
            } else {
              this.$utils.toast('保存失败');
            }
          });
      }

    },

    sendAddCar() {
      this.sendAddCarReq();
    },

  },
};
</script>

<style lang="scss" scoped>
.addcar {
  padding: 20rpx 25rpx;
  background-color: #2a3a52;
  min-height: 100vh;
  .scan {
    margin: 0 auto;
    height: 106rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    border-radius: 10rpx;
    text-align: center;

    font-size: 36rpx;
    font-weight: 400;
    color: #ffe471;
    image {
      position: relative;
      width: 68rpx;
      height: 68rpx;
      top: 20rpx;
      right: 10rpx;
    }
  }
  .list {
    margin: 20rpx 0;
    padding: 20rpx 0;
    border-radius: 20rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    padding: 0 40rpx;
    color: #f6f7f9;
    .input {
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;

      .placeholder {
        color: #f6f7f9;
      }
      .address {
        flex: 1;
        text-align: right;
        padding-right: 30rpx;
        line-height: 20rpx;
        line-height: 40rpx;
        margin-top: 31rpx;
      }

      .addressPlaceholder {
        flex: 1;
        text-align: right;
        color: #999;
        padding-right: 30rpx;
        line-height: 40rpx;
        margin-top: 31rpx;
      }
      input,
      picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }
      .area-city {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
    }
  }
  .primary {
    margin-top: 10rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    color: #4e6792;
    line-height: 106rpx;
    background: #ffffff;
    border-radius: 10rpx;
  }
  .primarySumbit {
    background-color: #7692bb;
    color: #fff;
  }
  .carKeyboard {
    color: #243836;
  }
  .uni-right-arrow {
    color: #ffe471;
    font-size: 10px;
  }
}
</style>
